input,
txtarea,
button,
a,
header,
main,
footer,
div {
	outline: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

header {
	width: 100%;
	height: 50px !important;
	background: #e6ebef;
	/* border-bottom: 1px solid #e6ebef; */
	position: fixed;
	z-index: 10100;
	transform: translateZ(0);
}

header button.login {
	line-height: 22px;
	color: #4c86fa;
	letter-spacing: 1px;
	background: transparent;
	border: none;
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 15px;
	transition-property: color
}

header button.login:hover {
	opacity: 1;
	color: #3476fa
}

header .logo {
	position: absolute;
	left: 20px;
	line-height: 50px;
	/* top: 10px */
}

header .logo,
header .logo h1 {
	width: 81px;
	display: block;
	overflow: hidden
}

header .logo img {
	width: 100%;
	display: block
}

header .search-box {
	margin: 0 auto;
	width: calc(100% - 150px - 2%);
	max-width: 880px;
	/*box-sizing:border-box;*/
	/* padding-left: 10px; */
}

.search-box {
	width: 100%;
	height: 42px;
	position: relative;
	top: 5px;
}

.search-input-box {
	padding: 0 30px 0 10px;
	width: 100%;
	height: 40px;
	background: #fff;
	/* border: 1px solid #e6ebef; */
	box-sizing: border-box;
	border-radius: 20px;
	position: relative;
	z-index: 10001;
}

.search-input-box input {
	margin: 9px 0;
	width: 100%;
	line-height: 1.8em;
	box-sizing: border-box;
	background: transparent;
	border: none;
	padding: 0 10px;
}

.search-input-box button {
	width: 20px;
	height: 20px;
	background: url("../images/search.svg") no-repeat;
	background-size: 100% 100%;
	border: none;
	opacity: .8;
	position: absolute;
	right: 18px;
	top: 10px;
	cursor: pointer
}

.search-input-box button:hover {
	opacity: 1
}

.search-keywords {
	/* padding: 0 20px; */
	width: 100%;
	max-height: 0;
	box-sizing: border-box;
	overflow: hidden;
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 10000;
	transition: .35s ease-in-out
}

.search-keywords.active {
	max-height: 999px
}

.search-keywords ul {
	padding: 20px 0 10px 0;
	width: 100%;
	background: #e6ebef;
	/* border: 1px solid #e6ebef; */
	overflow: hidden;
	border-radius: 0 0 20px 20px;
}

.search-keywords ul li {
	width: 100%;
	overflow: hidden;
	/* margin-left: 8px; */
}

.search-keywords ul li a {
	padding: 0 20px;
	width: 100%;
	height: 30px;
	color: #434b5b;
	line-height: 30px;
	box-sizing: border-box;
	display: block;
	transition: .15s ease
}

.search-keywords ul .over>a {
	background-color: #d8e7f5;
}

.modal {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .2);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10101;
	opacity: 0;
	display: none;
	transition: .15s ease
}

.modal.active {
	opacity: 1
}

.modal.quiet {
	opacity: 0
}

.modal-box {
	padding: 35px 25px;
	width: 70%;
	max-width: 580px;
	background: #fff;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	display: none;
	opacity: 0;
	transition: .2s ease-in-out
}

.modal-box.active {
	opacity: 1;
	transform: translateX(-50%) translateY(-60%)
}

.modal-box.quiet {
	opacity: 0;
	transform: translateX(-50%) translateY(-70%)
}

.modal-close {
	padding: 5px 10px 0 0;
	color: #434b5b;
	line-height: 20px;
	position: absolute;
	right: 0;
	top: 0
}

.modal-title {
	width: 100%;
	height: 45px;
	text-align: center
}

.modal-title a {
	margin: 0 1em;
	padding-bottom: 20px;
	color: #bcc4d5;
	display: inline-block;
	position: relative
}

.modal-title a.active {
	color: #4c86fa
}

.modal-title a.active:after {
	width: 100%;
	height: 4px;
	content: "";
	background: #4c86fa;
	display: block;
	position: absolute;
	left: 0;
	bottom: 0
}

.modal-content {
	width: 100%;
}

.modal-content-box,
.modal-content-box form {
	width: 100%;
}

.modal-content-box span {
	color: red;
}

.modal-input-item {
	margin-top: 0px;
	padding: 0 1em;
	width: 100%;
	height: 40px;
	background: #f8f9fa;
	/* border: 1px solid #e6ebef; */
	box-sizing: border-box;
	border-radius: 20px
}

.modal-input-item input {
	margin-top: 13px;
	width: 100%;
	color: #434b5b;
	background: transparent;
	border: none
}

.modal-button {
	margin-left: 10px;
	width: 100px;
	height: 36px;
	color: #f4f6f8;
	font-size: 14px;
	letter-spacing: 1px;
	text-align: center;
	line-height: 36px;
	background: #4c86fa;
	border: none;
	border-radius: 18px;
	cursor: pointer;
	float: right;
}

.graybtn {
	background: #f4f6f8;
	color: #000;
}

.modal-footer {
	margin-top: 20px;
	width: 100%;
	height: 42px
}

.modal-footer a {
	color: #434b5b;
	line-height: 22px;
	float: right
}

.modal-footer p,
.modal-footer p a {
	text-align: center;
	float: none
}

.modal-footer p a {
	color: #4c86fa
}

.modal-title-back {
	width: 100%;
	height: 42px;
	line-height: 22px;
	text-align: center
}

.modal-title-back a {
	padding-left: 22px;
	color: #4c86fa;
	background: url("../images/back.svg") left center no-repeat;
	background-size: auto 20px;
	float: left
}

.modal-title-back span {
	display: inline-block;
	transform: translateX(-50%)
}

.modal-input-sms {
	position: relative
}

.modal-input-sms input {
	padding-right: 8em;
	box-sizing: border-box
}

.modal-input-sms a {
	color: #4c86fa;
	position: absolute;
	right: 12px;
	top: 6px
}

.modal-content-box .left {
	float: left;
	width: 150px;
	background-color: #fff;

}

.modal-content-box .right {
	float: left;
	width: 100%;
	margin-top: 20px;
}

.modal-content-box .left .select {
	float: unset;
	height: 200px;
	/* border: 1px solid #e6ebef; */
}

.modal-content-box .left .select ul li {
	float: unset;
}


.modal-content-box .right .modal-button {
	margin-top: 20px;
}

*,
body,
html,
nav {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.clearfix:after,
.clearfix:before {
	display: table;
	content: " ";
	clear: both
}

body,
html {
	font: 14px/27px 'Helvetica Neue', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;
	color: #000
}

body,
html {
	height: 100%;
	overflow: initial
}

input[type=search]::-webkit-search-cancel-button { 
	-webkit-appearance: none; 
	position: relative; 
	height: 20px; 
	width: 20px; 
	border-radius: 50%; 
	background :#e6ebef url("../images/clear.svg") no-repeat center; 
	background-size: 20px 20px; 
	}

iframe {
	/* border: 1 */
}

a {
	text-decoration: none;
}

a:link,
a:visited {
	color: #555;
}

.none {
	display: none;
}

.hide {
	display: none;
}

.vtab {
	margin: auto;
	height: 100%;
}

.vtab>ul>li {

	background-color: #fff !important;
	list-style-type: none;
	display: block;
	text-align: center;
	width: 100%;
	/* border-bottom: 1px solid #d9dde1; */
	opacity: .4;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
}

.vtab>ul>li>a {
	writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	margin: 9px 0 0px 2px;
}

.vtab>ul>li.selected {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	border-right: none;
	z-index: 10;
	background-color: #fafafa !important;
	position: relative;
	background: 0 0;
	box-shadow: inset 3px 0 #555;
	color: #555;
}

.vtab>ul>li.selected>a {
	margin: 9px 0 0px 4px;
}

.vtab>ul {
	float: left;
	text-align: left;
	display: block;
	margin: auto 0;
	padding: 0;
	position: relative;
	top: 0px;
	/*width: 100%;*/
}


.sitelist {
	overflow: auto;
	height: 100%;
}

.sitelist ul {
	height: 100%;
	list-style: none;
}

.sitelist ul li {
	height: 35px;
	padding: 5px 10px 5px 5px;
}

.sitelist ul li img {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	padding: 10px
}

.sitelist ul li span {
	position: relative;
	top: 2px;
}

.sitelist li.active,
.sitelist li:hover {
	display: block;
	line-height: 2pc;
	color: #009688;
	cursor: pointer;
	background-color: #d8e7f5;
}

.sitelist li:hover .hover-content {
	display: block;
}


.sitelist li.active {
	font-weight: 800
}

.active {
	-webkit-animation: flipInY 2s .5s ease both;
	-moz-animation: flipInY 2s .5s ease both;
}

.main-content {
	background-color: #fff;
	float: left;
	height: 100%;
	width: 100%;
}

.leftside {
	height: calc(100% - 50px);
	padding-top: 50px;
}

.leftside .vtab {
	width: 30px;
	height: 100%;
	float: left;
	background-color: #e6ebef;
}

.leftside .navigation {
	width: 250px;
	height: 100%;
	float: left;
	overflow: hidden;
	background-color: #f8f9fa;
}

.leftside .main-content {
	background-color: #fff;
	float: left;
	height: 100%;
	width: calc(100% - 250px)
}

.rightside {
	height: calc(100% - 50px);
	padding-top: 50px;
}

.rightside .vtab {
	width: 30px;
	height: 100%;
	float: right;
	background-color: #e6ebef;

}

.rightside .navigation {
	width: 250px;
	height: 100%;
	float: right;
	overflow: hidden;
	background-color: #f8f9fa;
}

.rightside .main-content {
	background-color: #fff;
	float: left;
	height: 100%;
	width: calc(100% - 250px)
}

.rightside .vtab>ul>li.selected {
	box-shadow: inset -3px 0px #2cc185;
}

.rightside .sitelist>ul {
	margin-left: 0px;
	margin-right: 30px;
	height: 100%;
	list-style: none;
}

.bottomside {
	position: inherit;
	height: calc(100% - 51px)
}

.bottomside .header {
	position: inherit;
}

.bottomside .navigation {
	height: 250px;
	width: 100%;
	float: left;
	overflow: hidden;
	background-color: #f8f9fa;
	position: absolute;
	border-bottom: 1px solid #d9dde1;
	z-index: 10;
}

.bottomside .nothing {
	display: block;
	background-color: #fff;
	width: 100%;
	height: calc(100% - 51px);
	position: absolute;
	opacity: 0;
}

.bottomside .sitelist {
	height: 220px;
}

.bottomside .sitelist #websites {
	margin-left: 0px;
	margin-right: 0px;
}

.bottomside .vtab {
	height: 30px;
	width: 100%;
	background-color: #e6ebef;
}

.bottomside .vtab>ul {
	list-style: none;
}

.bottomside .vtab>ul>li {
	padding: 0 6px;
	float: left;
	width: auto;
	height: 30px;
}

.bottomside .vtab>ul>li.selected {
	box-shadow: inset 0px 3px #555;
}

.bottomside .vtab>ul>li.selected>a {
	margin: 3px 0 0px 0px;
}

.bottomside .vtab>ul>li>a {
	-webkit-writing-mode: unset;
	writing-mode: unset;
	margin: 9px 0 0px 0px;
}

.menu-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	--icon-width: 24px;
	position: absolute;
	right: 20px;
	top: 13px;

	flex-direction: column;
	transition: all calc(100ms + var(--transition-time)) cubic-bezier(0.8, 0, 0.33, 1.25);
	cursor: pointer;
	z-index: 10;
}

.menu-btn .line {
	width: var(--icon-width);
	background: gray;
	height: 2px;
	margin: 3px 0;
	transition: all calc(var(--transition-time) + 100ms) cubic-bezier(0.9, 0, 0.33, 1);
}

.menu-btn .line__1 {
	width: var(--icon-width);
	transform-origin: left;
}

.menu-btn .line__2 {
	width: var(--icon-width);
	transform-origin: center;
}

.menu-btn .line__3 {
	width: var(--icon-width);
	transform-origin: right;
}

.mCSB_container {
	margin-right: 0px;
}

#faveriters li.split {
	font-size: 0px;
	line-height: 0px;
	height: 0px;
	/* margin-top: -1px; */
	overflow: hidden;
	background: #e5e5e5;
	padding: 0px 5px;
	margin: 0px 8px;
}

.fa-plus:before {
	content: "\f067";
	font-family: FontAwesome;
}

.addbtn {
	position: absolute;
	bottom: 0px;
	width: 30px;
	height: 30px;
	display: block;
	text-align: center;
	cursor: pointer;
	z-index: 2;
	color: #555;
}


.select {
	width: 100%;
	overflow: auto;
}

.select ul {
	list-style: none;
}

.select ul li {
	padding: 0 6px;
	float: left;
	width: auto;
	height: 29px;
	margin: 0 0 5px 0;
}

.select>ul>li.selected {
	box-shadow: inset 0px -2px #555;
}

.select>ul>li.selected a {
	color: #555;
}

.select>ul>li a:hover {
	color: #555;
}

.hover-content {
	float: right;
	display: none;
}

.hover-content img {
	padding: 10px 0 10px 5px !important;
}

.modify {
	padding: 13px 0 10px 5px !important;
}

.content {
	width: 100%;
	height: 100%;
}

.template1 iframe {
	width: 100%;
	height: 100%;

}

.template2 iframe {
	width: 50%;
	height: 100%;
	float: left;
}

.template3 iframe {
	width: 33.3%;
	height: 100%;
	float: left;
}

.template4 iframe {
	width: 50%;
	height: 50%;
	float: left;
}

.barmenu {
	position: absolute;
	bottom: 0px;
}

.bottomside .barmenu {
	top: 0px;
	right: 0px;
}

.bottomside .addbtn {
	float: right;
	position: unset;
}

.bottomside .funcmenu {
	top: 30px;
	float: right;
	right: 0px;
	bottom: unset;
}

.funcmenu {
	z-index: 20000;
	bottom: 30px;
	position: absolute;
	background-color: #fff;
}

.funcmenu li {
	padding-left: 5px;
	padding-right: 5px;
	height: 30px;
}

.funcmenu li.active,
.funcmenu li:hover {
	display: block;
	color: #009688;
	cursor: pointer;
	background-color: #d8e7f5;
}

li {
	list-style: none;
}
